<template>
  <div class="wrap" v-if="memberType">
    <el-dialog
      :title="memberType.title"
      :visible.sync="state"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @open="open"
    >
      <div class="center">
        <div class="showinfo">
         
          <div class="qrcode">
            <img src="../assets/wxpay2.png" class="wx" alt="">
            <img :src="coe_uri" class="code" alt />
            <p>扫码付款：¥ {{this.memberType.price/100}}元</p>
          </div>
        </div>
       
      </div>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="close(1)">确 定</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import QRCode from "qrcode";
import { unifiedorder, findPayOrder } from "../utils/interface";
export default {
  props: {
    renewState: {
      type: Boolean,
      default: false
    },
    memberType: {
      type: null,
      default: null
    }
  },
  data() {
    return {
      formLabelWidth: "120px",
      recharge_type: "",
      recharge_way: "1",
      amount: "",
      coe_uri: "",
      orderId: "",
      serInterValTime: null,
      text:""
    };
  },
  computed: {
    state: {
      get() {
        if (this.renewState) {
          this.showCode();
        }else{

          
        }
        return this.renewState;
      },
      set() {}
    }
  },
  methods: {
    open() {},
    close(v) {
      clearInterval(this.serInterValTime)
      if(this.text =='支付成功'){
         this.success()
      }else{
        this.$emit("get_renew",null);
      }
    },
    showCode() {
      unifiedorder({
        trade_type: "NATIVE ",
        total_fee: this.memberType.price,
        body: this.memberType.title,
        product_type: this.memberType.type
      }).then(res => {
        this.orderId = res.data.data.out_trade_no;
        QRCode.toDataURL(res.data.data.code_url)
          .then(url => {
            this.coe_uri = url;
            this.findIn();
          })
          .catch(err => {
            this.$message({
              type: "error",
              message: "生成付款二维码失败请重试"
            });
          });
      });
    },
    findIn() {
      this.serInterValTime = setInterval(() => {
        findPayOrder({ out_trade_no: this.orderId }).then(res => {
          console.log(res);
          let text = ""
          switch (res.data.data.trade_state) {
            case "SUCCESS":
              text = "支付成功 "
              this.success()
              clearInterval(this.serInterValTime)
              break;
            case "REFUND":
              text = "转入退款 "
              clearInterval(this.serInterValTime)
              break;
            case "NOTPAY":
              text = "未支付 "
              break;
            case "CLOSED":
              text = "已关闭  "
              clearInterval(this.serInterValTime)
              break;
            case "REVOKED":
              text = "已撤销 "
              clearInterval(this.serInterValTime)
              break;
            case "USERPAYING":
              text = "用户支付中 "
              break;
            case "PAYERROR":
              text = "支付失败 "
              clearInterval(this.serInterValTime)
              break;
            
          }
          this.text = text
        });
      }, 1000);
    },
    success(){
      this.$emit("get_renew", {
          recharge_type: this.memberType.type,
          recharge_way: this.recharge_way,
          order_code: this.orderId,
          amount: this.memberType.price/100
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 240px;
}
>>> .el-dialog {
  width: 250px !important;
}
.showinfo {
  display: flex;
  border-radius: 8px;
  padding: 15px 0;
  justify-content: center;

  .qrcode {
    .code {
      width: 200px;
      height: 200px;
      display: block;
      border-radius: 4px;
      background: #999;
    }
    .wx{
       width: 130px;
       display: block;
       margin: 0 auto 15px;
    }
    p{
      color: #f00;
      text-align: center;
      margin-top: 15px;
    }
  }
}

</style>
